import { message } from "@/utils/message";
import { tableData } from "./data";
import editForm from "./edit.vue";
import { addDialog } from "@/components/ReDialog";
import { h } from "vue";

// 如果您不习惯tsx写法，可以传slot，然后在template里写
// 需是hooks写法（函数中有return），避免失去响应性
export function useColumns() {
  const columns: TableColumnList = [
    {
      label: "机器名称",
      prop: "machineName"
    },
    {
      label: "机器类型",
      prop: "machineType"
    },
    {
      label: "位置",
      prop: "location"
    },
    {
      label: "操作",
      cellRenderer: ({ index, row }) => (
        <>
          <el-button size="small" onClick={() => handleEdit(index + 1, row)}>
            Edit
          </el-button>
          <el-button
            size="small"
            type="danger"
            onClick={() => handleDelete(index + 1, row)}
          >
            Delete
          </el-button>
        </>
      )
    }
  ];
  const handleEdit = (index: number, row) => {
    // message(`您修改了第 ${index} 行，数据为：${JSON.stringify(row)}`, {
    //   type: "success"
    // });
    addDialog({
      title: "设备系数",
      width: "40%",
      draggable: true,
      closeOnClickModal: false,
      contentRenderer: () => h(editForm),
      beforeSure: (done, { options }) => {
        message("提交成功", {
          type: "success"
        });
        done(); // 关闭弹框
      }
    });
  };

  const handleDelete = (index: number, row) => {
    message(`您删除了第 ${index} 行，数据为：${JSON.stringify(row)}`);
  };

  return {
    columns,
    tableData
  };
}
